<template>
    <div>
        <Modal
                v-model="showModal"
                title="钉钉登录"
                width="330">
            <span slot="footer"></span>
            <div id="login_container"></div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'dingCode',
        data () {
            return {
                showModal: false,
                appId: process.env.VUE_APP_DING,
                redirectUrl: process.env.VUE_APP_REDIRECT
            }
        },
        methods: {
            _dingInit (page) {
                DDLogin({
                    id: 'login_container',
                    goto: encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + this.appId + '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + this.redirectUrl + page),
                    style: 'border:none;background-color:#FFFFFF;',
                    width: '300',
                    height: '300'
                })
                let hanndleMessage = function (event) {
                    let origin = event.origin
                    if (origin === 'https://login.dingtalk.com') {
                        let loginTmpCode = event.data
                        let url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + this.appId + '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + this.redirectUrl + '&loginTmpCode=' + loginTmpCode
                        window.location.href = url
                    }
                }
                if (typeof window.addEventListener !== 'undefined') {
                    window.addEventListener('message', hanndleMessage, false)
                } else if (typeof window.attachEvent !== 'undefined') {
                    window.attachEvent('onmessage', hanndleMessage)
                }
            },
            show (page) {
                this.showModal = true
                this._dingInit(page)
            }
        }
    }
</script>

<style scoped>

</style>
